<template>
    <div class="container">
        <div :class="['item',hover==index?'select':'']" @click="hover = index"  v-for="(item,index) in data" :key="index">
            <div>
                <span class="badge ">{{item.infoCount}}</span>
                <img :src="item.img" alt="item">
            </div>
            <div>
                <h5>{{item.title}}</h5>
                <div>
                    <p>{{item.text}}</p>
                    <span v-if="hover!=index?true:false">1min</span>
                    <span v-else class="glyphicon glyphicon-cog"></span>
                </div>
            </div>
        </div>
        <div class="text-center">
            <button @click="pops" data-toggle="modal" data-target="#exampleModal"  class="btn btn-primary btn-block" >自定义群组</button>
        </div>
        <pop :info = 'info'></pop>
    </div>
</template>
<script>    
import pop from "./pop.vue"
export default {
    data(){
        return{
            info:{},
            hover:1,
            data:[
                {
                    id:0,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
                {
                    id:1,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
                {
                    id:2,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
                {
                    id:3,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
            ]
        }
    },
    created(){
        this.$store.commit("setTargetId","")
    },
    methods:{
       pops:function(){
           this.info = {
                key:1,
                close:"关闭",
                confirm:"确定",
                title:"创建群组",
                groupName:"群名称",
                groupProfile:"群简介",
                callback:this.popsCallpack
           }
       },
       popsCallpack:function(res){
           console.log(res)
       }
    },
    components:{
        pop
    }
}
</script>
<style scoped>
    .container{
        height: 500px;
        overflow: auto;
        padding-right: 0;
        padding-left: 0;
        background:transparent
    }
    .item{
        padding: 10px;
        margin: 20px 0;
        display: flex;
    }
    .item>div:first-child{
        position: relative;
    }
    .item>div:first-child>img{
        width: 54px;
        height: 54px;
        border-radius: 50%;
    }
    .item>div:last-child{
        width: calc(100% - 54px);
        color: #9bacbc;

        padding-left: 18px;
    }
    .item>div:last-child>div{
        display: flex;
        font-size: 12px;
        justify-content: space-between
    }
    .item>div:last-child h5{
        color: #8ca1b6;
    }
    .item>div:last-child p{
        width: 78%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

    }
    .badge{
        top: 0;
        right: -4px;
        color: #fff;
        position: absolute;
        background: #2f97de;

    }
    .select{
        background: #d1e8ee;
        box-sizing: border-box;
        border-left: 1px solid #3198db ; 
    }
</style>
